<template>
	<view>
		<topbar title="发布广告" background="background:#FFDE21"></topbar>
		<view class="content">
			<view class="dis_f_co top">
				<view class="title">广告内容</view>
				<view style="border-bottom: 2rpx solid #EEE;">
					<u-input type="textarea" v-model="text" auto-height height="70" maxlength="9999"
						placeholder="请输入广告内容"></u-input>
				</view>
			</view>
			<view class="top dis_f_co" style="">
				<view class=" dis_f_sb_c" style="margin-bottom: 24rpx;">
					<view class="dis_f_c_c title" style="margin: 0;">上传图片</view>
					<view class="dis_f_c_c size_22">最多上传8张图片</view>
				</view>
				<view style="width: 100%;">
					<u-upload ref="uUpload" :action="action" :file-list="fileList" width="140" height="140"
						:max-count="image_num"></u-upload>
				</view>
				<view class="dis_f_l_c dis_f_w wc_img" style="width: 100%;">
					<!-- <image class="ty_img" @click="add_imgs" src="../../static/xuan_shang/sc_img.png" mode=""></image> -->
					<image class="ty_img" @click="del_img(index)" :src="item" mode=""
						v-for="(item,index) in images_str"></image>
				</view>
			</view>
			<view style="position: fixed;bottom: 84rpx;left: 24rpx;">
				<view v-if="yes2">
					<view class="btn btn1 dis_f_c_c" @click="go_part2" v-if="yes">
						{{next}}
					</view>
					<view class="btn btn2 dis_f_c_c" @click="fail" v-else>
						{{next}}
					</view>
				</view>
				<view class="btn btn1 dis_f_c_c" @click="submit" v-else>
					确定修改
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://jk85472adeg.htjy668.cn/index/index/upload',
				fileList: [],
				text: '',
				yes: false,
				type: 5,
				next: '下一步',
				red: 0,
				yes2: true,
				images_str: [],
				images: [],
				id: 0,
				image_num:8
			};
		},
		watch: {
			text(newValue, oldValue) {
				if (this.text != '') {
					this.yes = true
				} else {
					this.yes = false
				}
			}
		},
		onLoad(e) {
			this.type = e.cate
			if (this.type == 5) {
				this.next = '下一步';
				this.red = 1;
			} else {
				this.next = '发布广告';
			}
			if (e.id) {
				this.yes2 = false
				this.id = e.id;
				this.go_info()
			}
		},
		methods: {
			del_img(index) {
				console.log(this.images_str);
				console.log(this.images);
				this.images_str.splice(index, 1);
				this.images.splice(index, 1);
			},
			go_info() {
				if (this.id > 0) {
					this.$.ajax(1, 'post', 'index/checktokens', {
						uid: uni.getStorageSync('uid'),
						token: uni.getStorageSync('token')
					}, (res) => {
						console.log(res)
						if (res.code == 9) {
							this.$.ti_shi('token已过期，请重新登陆')
							uni.clearStorageSync()
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}, 1000)
							return;
						} else {
							this.$.ajax(1, 'post', 'index/guang_info', {
								uid: uni.getStorageSync('uid'),
								token: uni.getStorageSync('token'),
								id: this.id,
							}, (res) => {
								console.log(res)
								if (res.code == 1) {
									this.images_str = res.data.image_str;
									this.images = res.data.image_array;
									this.text = res.data.content;
									this.image_num = 8-res.data.image_num;
								} else {
									this.$.ti_shi(res.msg)
								}
							})
						}
					})
				} else {
					this.$.ti_shi('参数错误')
					this.$.back();
				}
			},
			submit() {
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if (res.code == 9) {
						this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1000)
						return;
					} else {
						let files = [];
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						// files = this.$refs.uUpload.lists.filter(val => {
						// 	return val.progress == 100;
						// })
						// 如果您不需要进行太多的处理，直接如下即可
						files = this.$refs.uUpload.lists;
						let fileses = []
						if (files != '') {
							files.forEach((item, key) => {
								if (item.response != null) {
									this.fileList[key]=item.response.id
									fileses.push(item.response.id)
								}
							})
						} 
						if (this.images != '') {
							this.images.forEach((item,key) => {
								fileses.push(item)
							})
						}
						if (fileses == '') {
							this.$.ti_shi('请上传图片');
						}　
						this.$.ajax(1, 'post', 'index/editguang', {
							uid: uni.getStorageSync('uid'),
							token: uni.getStorageSync('token'),
							content: this.text,
							pic: fileses,
							id:this.id
						}, (res) => {
							console.log(res)
							if (res.code == 1) {
								this.$.ti_shi(res.msg)
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/guang_gao/gg_gl'
									})
								}, 1000)
							} else {
								this.$.ti_shi(res.msg)
							}
			
						})
					}
				})
			},
			go_part2() {
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if (res.code == 9) {
						this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1000)
						return;
					} else {
						let files = [];
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						// files = this.$refs.uUpload.lists.filter(val => {
						// 	return val.progress == 100;
						// })
						// 如果您不需要进行太多的处理，直接如下即可
						files = this.$refs.uUpload.lists;
						if (files == '') {
							this.$.ti_shi('请上传图片');
						}else{
							files.forEach((item, key) => {
								if (item.response != null) {
									this.fileList[key]=item.response.id
								}
							})
						}
						if (this.type == 5) {
							this.$.open('/pages/guang_gao/part2?content=' + this.text + '&cate=' + this.type +
								'&pic=' + this.fileList.join(',') + '&red=' + this.red);
							return;
						}
						// 　　
						this.$.ajax(1, 'post', 'index/setguang', {
							uid: uni.getStorageSync('uid'),
							token: uni.getStorageSync('token'),
							content: this.text,
							cate: this.type,
							pic: this.fileList.join(','),
							red: this.red

						}, (res) => {
							console.log(res)
							if (res.code == 1) {
								this.$.ti_shi(res.msg)
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/guang_gao/gg_gl'
									})
								}, 1000)
							} else {
								this.$.ti_shi(res.msg)
							}

						})
					}
				})

				console.log(this.fileList)
			},
			
			fail() {
				this.$.ti_shi('请完善信息')
			}
		}
	}
</script>

<style lang="scss">
	.wc_img {
		image {
			margin-left: 12rpx;
		}
	}


	.ty_img {
		width: 202rpx;
		height: 202rpx;
		margin-bottom: 12rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.content {
		width: 100%;
		top: calc(var(--status-bar-height) + 88rpx);
		z-index: 998;
		position: absolute;
		padding: 36rpx 24rpx;

		.top {
			width: 100%;
			margin-bottom: 12rpx;
			padding: 36rpx 24rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);

			.title {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #222222;
				margin-bottom: 24rpx;
			}
		}

		.btn {
			width: 702rpx;
			height: 98rpx;

			color: #FFFFFF;
			border-radius: 50rpx;
		}

		.btn1 {
			background-color: #E23C63;
		}

		.btn2 {
			background-color: #bbb;
		}
	}
</style>
